<template>
	<view class="list">
		<scroll-view scroll-y="true">
			<view v-for="(v,k) in list" :class="{active:listIndex == k}" @click="changeIndex(k,v)">{{v.name}}</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		shopCate
	} from '@/API/business.js'
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				listIndex: -1,
			}
		},
		mounted() {
		},
		methods: {
			changeIndex(index, item) {
				if (this.listIndex == index) {
					this.listIndex = -1
				} else {
					this.listIndex = index
				}
				this.$emit('change', this.listIndex == -1 ? '' : item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #fff;
		overflow-y: auto;

		scroll-view {
			height: 550rpx;
		}

		view {
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 20rpx;
			font-weight: 400;
			font-size: 26rpx;
			position: relative;

		}

		view.active {
			color: #EB5C20 !important;
			background-color: #fff;
		}


		view.active::before {
			content: '';
			width: 4rpx;
			height: 30rpx;
			background: linear-gradient(90deg, #DD551B, #F49355);
			position: absolute;
			color: #EB5C20;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

	}
</style>